<template>
  <div class="Case">
    <Header :zIndex="6" ref="Header"></Header>
    <div class="subDiv">
      <div class="sub-banner">
        <div class="title-box">
          <p class="title">帮助中心</p>
          <p class="sub-title">免费的第三方投票制作平台</p>
        </div>
        <img class="banner-img" src="../assets/img/sub-banner-bg.png" alt="" />
      </div>
    </div>
    <div class="help-wrapper">
      <div class="help-main">
        <div class="help-side">
          <div class="side-item" v-for="(group, index) in groups" :key="index">
            <div class="side-title">
              <p>{{group.name}}</p>
            </div>
            <ul class="side-list">
              <li v-for="(item, idx) in group.items" :class="curItem == item ? 'on' : ''" :key="idx" @click="setItem(item)">
                <a href="javascript:;" :title="item.title">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="help-contain">
          <div class="article" v-if="curItem">
            <div class="text-center">
              <h2 class="title">{{curItem.title}}</h2>
              <div class="c-line"></div>
            </div>
            <div class="article-content" v-html="content"></div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
import { Toast } from 'vant'
export default {
  name: 'Helper',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      articles: [],
      groups: [],
      curItem: null,
      content: '',
      aid: 0
    }
  },
  created () {
    if(this.$route && this.$route.query) {
      if(this.$route.query["id"]) {
        this.aid = parseInt(this.$route.query["id"]);
      }
    }
    this.setTitle('帮助中心');
    this.getData()
  },
  methods: {
    // 文章分类
    getData () {
      Ajax.get('article/category').then(res=>{
        if(res.code == 0){
          this.groups = res.data;
          this.joinAry();
        } else {
          Toast(res.msg);
        }
      }).catch(err=>{
        console.error(err);
      })
      // 文章分类列表
      Ajax.get('article/list', {page: 1, size: 200, type: 0}).then(res=>{
        if(res.code == 0){
          this.articles = res.data;
          this.joinAry();
        } else {
          Toast(res.msg);
        }
      }).catch(err=>{
        console.error(err);
      })
    },
    // 放入到数组中
    joinAry(){
      if(this.groups && this.groups.length > 0 && this.articles && this.articles.length > 0){
        const that = this;
        this.groups.forEach((val, idx, ary)=>{
          val.items = that.articles.filter(x => x.category == val.id);
        });
        this.$forceUpdate();
        if(this.aid > 0){
          var ary = this.articles.filter(x => x.id == this.aid);
          if(ary && ary.length > 0){
            this.setItem(ary[0]);
          } else {
            this.setItem(this.groups[0].items[0]);
          }
        } else {
          this.setItem(this.groups[0].items[0]);
        }
      }
    },
    setItem (e) {
      this.curItem = e;
      this.content = "loading...";
      this.setTitle(e.title + '_帮助中心');
      this.getInfo(e.id);
    },
    // 获取文章中的内容
    getInfo(id){
      Ajax.get('article/info/' + id).then(res=>{
        if(res.code == 0){
          this.content = res.data.content;
        } else {
          Toast(res.msg);
        }
      }).catch(err=>{
        console.error(err);
      })
    }
  }
}
</script>
<style src="@/assets/css/case.css"  scoped></style>
<style src="@/assets/css/helper.css"  scoped></style>
